$(function() {
    //-1.页面一加载就渲染页面
    load();
    //0.获取本地存储数据的函数 返回值为一个本地数据的数组
    function getData() {
        var temp = localStorage.getItem('todolist');
        //将本地存储中的字符串格式转化为数组格式
        //如果取得回来数据，就返回从本地存储获得的数组，没有返回数据返回一个空数组
        if (temp) {
            return JSON.parse(temp);
        } else {
            return [];
        }
    }

    //0.5 保存本地数据
    function saveData(new_arr) {
        var temp = JSON.stringify(new_arr);
        localStorage.setItem('todolist', temp);
    }

    //0.6封装一个load函数
    function load() {
        //获取本地数据 返回值为一个本地数据的数组
        var temp_arr = getData();
        //清空原来doing和done里面的数据
        $(".doing").empty();
        $(".done").empty();
        //对数组进行遍历
        $.each(temp_arr, function(index, ele) {
            //进行判断 如果ele.done 为false 则放到doing   否则放到done
            if (ele.done == false) {
                $('.doing').append('<li> <input type="checkbox"> <p id="p-' + index + '">' + ele.title + '</p><a href="javascript:;">-</a> </li>');
            } else {
                $('.done').append('<li> <input type="checkbox" checked> <p id="p-' + index + '">' + ele.title + '</p><a href="javascript:;">-</a> </li>');
            }
        });
        $('.doing_num').html($(".doing li").length);
        $('.done_num').html($(".done li").length);
    }

    //1.给搜索框绑定 按下回车事件
    $("#search").on('keydown', function(e) {
        //如果按下的是回车键，则从本地存储中获取数据
        if (e.keyCode == 13) {
            var temp_arr = getData(); //现在的temp_arr是一个数组
            //判断用户有没有输入内容
            if ($("#search").val()) {
                //用户有输入内容  将输入的内容存放到一个对象，并且设置为 未完成事项
                var temp_obj = {
                    title: $("#search").val(),
                    done: false
                };
                //将新对象存放在数组中
                temp_arr.unshift(temp_obj);
                saveData(temp_arr);
                load(); //进行渲染
            } else {
                alert('请输入内容');
            }
        }
    })

    //2.给删除按钮添加点击事件  用on动态的删除   防止删除一个后  伪数组结构就被改变了
    $(".middle .w").on('click', 'a', function() {
        var temp = $(this).siblings('p').prop('id');
        var index = temp.substr(2); //获取所点击的a的index
        var temp_arr = getData();
        temp_arr.splice(index, 1);
        saveData(temp_arr);
        load(); //进行渲染
    });

    //3.给复选框添加功能
    $(".middle .w").on('change', 'input', function() {
        var temp = $(this).siblings('p').prop('id');
        var index = temp.substr(2); //获取所点击的a的index
        var temp_arr = getData();
        if ($(this).prop('checked')) {
            temp_arr[index].done = true;
        } else {
            temp_arr[index].done = false;
        }
        saveData(temp_arr);
        load(); //进行渲染
    });

    //4.给clear 添加清除功能
    $(".clear").on('click', function() {
        var empty_arr = [];
        saveData(empty_arr);
        load();
    });















});